<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>线索列表</title>
    <style>
        body {
            margin: 0;
        }

        .all {
            padding: 60px 80px;
        }

        .head {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
        }

        * {
            box-sizing: border-box;
        }

        .head-right {
            display: flex;
        }


        .search {

            display: flex;
        }

        .search input {
            height: 100%;
            border: 1px solid grey;
        }

        .search button {
            flex: 1;
            cursor: pointer;
            background-color: rgb(107, 172, 136);
        }

        .head-right {
            display: flex;
            justify-content: space-between;
            width: 220px;

        }

        .btn {
            cursor: pointer;
        }

        .btn1 {
            background-color: #70AD47;
        }

        .btn2 {
            background-color: #FFC000;
        }

        .btn3 {
            background-color: rgb(168, 113, 88);
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid rgb(46, 44, 44);
            text-align: center;
            padding: 10px;
        }



        tbody tr:hover {
            background-color: rgb(178, 180, 174);
        }

        .bottom {
            padding: 10px;
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .bottom div {
            margin-right: 20px;
        }

        .page-nums button {
            background-color: unset;
            border: none;
            cursor: pointer;
        }

        .page-nums button:hover {
            color: rgb(148, 21, 21);
            background-color: rgb(190, 197, 176);
        }

        .active {
            color: rgb(19, 202, 34) !important;
        }
    </style>
</head>

<body>
    <div class="all">
        <div class="head">
            <div class="search">
                <input type="text" placeholder="线索名称/手机号码">
                <button>搜索</button>
            </div>
            <div class="head-right">
                <a href="../clue/cluenew.html">
                    <button class="btn btn1">新建线索</button>
                </a>
                <a href="../clue/clueedit.html">
                <button class="btn btn2">编辑</button>
                </a>
                <button class="btn btn3">批量删除</button>
            </div>
        </div>
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox"></th>
                    <th>线索名称</th>
                    <th>联系电话</th>
                    <th>地址</th>
                    <th>下次联系时间</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>xxxx</td>
                    <td>xxxx</td>
                    <td>xxxx</td>
                    <td>xxxx</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>xxxx</td>
                    <td>xxxx</td>
                    <td>xxxx</td>
                    <td>xxxx</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>xxxx</td>
                    <td>xxxx</td>
                    <td>xxxx</td>
                    <td>xxxx</td>
                </tr>
            </tbody>
        </table>
        <div class="bottom">
            <div>共15条</div>
            <div>
                <select name="" id="">
                    <option value="">每页3行</option>
                    <option value="">每页4行</option>
                    <option value="">每页5行</option>
                </select>
            </div>
            <div class="page-nums">
                <button>&lt;</button>
                <button class="active">1</button>
                <button>2</button>
                <button>3</button>
                <button>4</button>
                <button>&gt;</button>
            </div>
        </div>
    </div>
</body>

</html>